<template>
	<div class="layout-pd">
		<el-card shadow="hover">
			<div class="mb15">
				<el-button size="default" type="primary" class="ml10" @click="onOpen('add', '')">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增地点
				</el-button>
			</div>
			<main>
				<div class="list-head">
					<div class="list-head__title">
						<div>名称</div>
						<div>排序</div>
						<div>级别</div>
					</div>
					<div class="list-head__opt">操作</div>
				</div>
				<el-tree style="width: 100%" node-key="id" :props="{ label: 'name' }" :data="state.tableData.data" :expand-on-click-node="false">
					<template #default="{ node, data }">
						<div class="custom-tree-node">
							<div class="custom-tree-node__title">
								<div>
									{{ node.label }}
								</div>
								<div>{{ data.sort }}</div>
								<div>
									<span v-if="data.level == 1">省级</span>
									<span v-else-if="data.level == 2">市级</span>
									<span v-else>区级</span>
								</div>
							</div>
							<div>
								<el-button size="small" text type="primary" @click="onOpen('add', data.id)">新增 </el-button>
								<el-button size="small" text type="primary" @click="onOpen('edit', data.id)">修改</el-button>
								<el-button size="small" text type="primary" @click="onTabelRowDel(data)">删除</el-button>
							</div>
						</div>
					</template>
				</el-tree>
			</main>
		</el-card>
		<AreaDialog ref="AreaRef" @refresh="refresh" />
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, defineAsyncComponent, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { DataAreaApi } from '/@/api/shop/data/area/index';
import msg from '/@/utils/messageUtils';
const AreaDialog = defineAsyncComponent(() => import('./dialog.vue'));
const AreaRef = ref();
const state = reactive({
	tableData: {
		data: [],
		loading: true,
	},
});

const loadData = async () => {
	try {
		const { data } = await DataAreaApi().tree();
		state.tableData.data = data;
		console.log('data: ', data);
	} catch (e) {
		console.log('e: ', e);
	} finally {
		state.tableData.loading = false;
	}
};

const refresh = () => {
	loadData();
};
const onTabelRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除区域：“${row.name}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			try {
				await DataAreaApi().delete(row.id);
				msg().success('删除成功');
				loadData();
			} catch (error: any) {
				msg().error('删除失败，请重试');
			}
		})
		.catch(() => {});
};

const onOpen = (flag: string, id: any) => {
	AreaRef.value.openDialog(flag, id);
};

const handleSelection = () => {};
onMounted(() => {
	loadData();
});
</script>

<style scoped lang="scss">
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}

.custom-tree-node__title {
	width: 600px;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	div:first-child {
		width: 200px;
	}

	div:nth-child(3n) {
		width: 100px;
		align-items: center;
		display: flex;
		justify-content: center;
	}
}

.list-head {
	width: 100%;
	height: 40px;
	padding: 0 40px 0 24px;
	font-size: 14px;
	background: #f5f5f5;
	color: #434343;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.list-head__title {
	width: 600px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex: 1;
	div:first-child {
		width: 300px;
	}
	div:nth-child(3n) {
		width: 300px;
		align-items: center;
		display: flex;
		justify-content: center;
	}
}

.list-head__opt {
	display: flex;
}
</style>
